<template>
    <div class="topBox">
        <div class="L"><router-link to="/">吱zz</router-link></div>
        <div class="C">
            <div class="saerchbox">
                <input name="" type="text" v-model="search"><img src="/assets/images/ss.png" @click="onSearch">
            </div>
        </div>
    </div>
    <div style="display: flex; align-content: center; justify-content: center; flex-direction: column"><router-link to="/connect" style="text-align: center; color: #ccc;">切勿购买违法商品、如需售后、广告、合作等请点击此处联系</router-link>
    <div style="text-align: center; color: #ccc">吱吱的网站旨在收集小众新奇的玩具，如果商品有侵权请联系我哦</div>
    </div>


    <div class="clear"></div>
    <div class="aui-m-slider">
        <div class="m-slider" data-ydui-slider>
            <div class="slider-wrapper">
                <div class="slider-item"> <a href="javascript:;"> <img src="/assets/images/496a44588736d86d928ba68ffd49572.png"> </a> </div>
                
            </div>
            <div class="slider-pagination"></div>
        </div>
    </div>
    <div class="clear"></div>
    <div class="lqgwBox">

        <ul>
            <li v-for="(item) in data.type">
                <router-link :to="{path:'product/list/index',query:{id:item.id}}">
                    <img :src="item.thumb_cdn">
                    <p>{{ item.name }}</p>
                </router-link>
            </li>
            <li>
                <router-link to="product/list/index">
                    <img src="/public/assets/images/2.jpg">
                    <p>更多</p>
                </router-link>
            </li>
        </ul>
    </div>
    <div class="clear"></div>

    <div class="clear"></div>
    <div class="contitbox">
        <p>新品</p>
    </div>
    <div class="clear"></div>
    <ul class="proul">
        <li v-for="item in data.new">
            <div class="con">
                <router-link :to="{path:'/product/product/info',query:{id:item.id}}">
                    <img :src="item.thumbs_cdn[0]">
                    <p><span>￥</span>{{ item.price }}</p>
                </router-link>
            </div>
        </li>

    </ul>
    <div class="clear"></div>

    <div class="clear"></div>

    <div class="clear"></div>
    <div class="contitbox">
        <p>热销</p>
    </div>
    <div class="clear"></div>
    <ul class="proul_2">
        <li v-for="item in data.hot">
            <div class="con">
                <router-link :to="'detail.html?id=' + item.id">
                    <img :src="item.thumbs_cdn[0]">
                    <p><span>￥</span>{{ item.price }}</p>
                </router-link>
            </div>
        </li>


    </ul>

    <div class="h54"></div>

    <Footer />
</template>

<script setup>
// console.log(id);
import Footer from 'components/common/Footer.vue';

import { ref, getCurrentInstance, onMounted, reactive } from 'vue';
const { proxy } = getCurrentInstance();
var search = reactive();
const data = ref([]);
onMounted(() => {
    getProduct();
});
const getProduct = async () => {
    const result = await proxy.$Api.getProduct();
    data.value = result.data;
    console.log(data.value);
}
const onSearch = ()=>{
    proxy.$router.push({path:'/product/list/index',query:{search:search}});
}

</script>

<style>
@import url('/assets/css/banner.css');
</style>
